<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
    style="display: flex; justify-content: center;">
    <el-menu-item index='0' @click="getSpuList()">全部</el-menu-item>
    <el-menu-item :index="item.id" v-for="item in categoryList" :key="item.id">{{ item.name }}</el-menu-item>
    <el-menu-item>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="qurey.keyWord" placeholder="搜索" clearable />
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-menu-item>
  </el-menu>

  <br>
  <el-row>
    <el-col v-for="item in spuList.list" :key="item.id" :span="5" :offset="1" style="margin-bottom: 20px;">
      <el-card :body-style="{ padding: '0px' }" style="width: 250px; height: 360px" @click="toGoodsInfo(item.id)">
        <img :src="item.picture" class="image uniform-size" />
        <div style="padding: 14px">
          <span style="font-size: small;">{{ item.name }}</span>
          <div class="bottom">
            <div>
              <span class="prize" style="color: red; font-size: smaller;">￥{{ item.price }}</span>
            </div>
            <span style="font-size: x-small;">销量：{{ item.totalSales }}</span>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import api from '@/api';
import { ElNotification } from 'element-plus';
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const qurey = ref({
  categoryId: '',
  keyWord: ''
})

const spuList = ref({
  list: [
    {
      id: '',
      name: '',
      picture: '',
      price: '',
      stock: '',
      totalSales: ''
    }
  ]
})

onMounted(() => {
  getSpuList()
  getCategoryList()
})

function getSpuList() {
  qurey.value.categoryId=''
  qurey.value.keyWord=''
  api.shop.getSpuList({ categoryId: qurey.value.categoryId, keyWord: qurey.value.keyWord })
    .then(response => {
      spuList.value.list = response.data.data
    })
    .catch(error => {
      ElNotification({
        title: 'Error',
        message: error.data.msg,
        type: 'error',
        duration: 1500
      })
    });

}

function toGoodsInfo(id: string) {
  router.push({
    name: 'goodsinfo',
    params: {
      id: id
    }
  });
}

const activeIndex = ref('1')
const handleSelect = (key: string) => {
  if(key !== '0'){
    qurey.value.categoryId = key
  api.shop.getSpuList({ categoryId: qurey.value.categoryId, keyWord: qurey.value.keyWord })
    .then(response => {
      spuList.value.list = response.data.data
    })
    .catch(error => {
      ElNotification({
        title: 'Error',
        message: error.data.msg,
        type: 'error',
        duration: 1500
      })
    });
  }
}

// function getSpuList(key: string){
//   api.shop.getSpuList({ categoryId: key, keyWord: qurey.value.keyWord })
//     .then(response => {
//       spuList.value.list = response.data.data
//     })
//     .catch(error => {
//       ElNotification({
//         title: 'Error',
//         message: error.data.msg,
//         type: 'error',
//         duration: 1500
//       })
//     });
// }

const categoryList = ref([
  {
    id: '',
    name: ''
  }
])

function getCategoryList() {
  api.shop.getCategoryList()
    .then(response => {
      categoryList.value = response.data.data
    })
    .catch(error => {
      ElNotification({
        title: 'Error',
        message: error.data.msg,
        type: 'error',
        duration: 1500
      })
    });
}

const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  api.shop.getSpuList({ categoryId: qurey.value.categoryId, keyWord: qurey.value.keyWord })
    .then(response => {
      spuList.value.list = response.data.data
    })
    .catch(error => {
      ElNotification({
        title: 'Error',
        message: error.data.msg,
        type: 'error',
        duration: 1500
      })
    });
}
</script>

<style>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}

.uniform-size {
  width: 100%;
  /* 设置图片宽度 */
  height: 270px;
  /* 设置图片高度 */
  object-fit: cover;
  /* 控制图片的缩放方式，可以根据需要调整，例如contain或none */
}
</style>
